import { Children, useEffect, useRef, useState } from 'react'
// import { debounce } from '../util/Utils'
import './style.less'
let timers, startX, rangee
function Slide(props){
    let { children, delay, autoPlay, activeColor, unActiveColor, showBtns, height } = props
    let [imgIndex, setIndex] = useState(0) // 当前图片下标
    let [li, setLi] = useState(new Array(Children.count(children)).fill(false))// 底部标记状态
    let [timer, setTimer] = useState(null)  // 计时器
    let [transition, setTransition] = useState('left ease 0.3s')  // 过渡 
    let [isUnMount, setUnMount] = useState(false) // unMount
    let [opType, setOp] = useState('') // 操作类型
    let [range, setRange] = useState(0) // 操作类型
    let [ranges, setRanges] = useState(0) // 操作类型
    let slideRef = useRef(null)
    useEffect(()=>{
        return()=>{
            console.log('unMount')
            setUnMount(true)
            clearInterval(timer)
        }
    // eslint-disable-next-line react-hooks/exhaustive-deps
    },[])
    useEffect(()=>{
        let arr = new Array(Children.count(children)).fill(false)
        arr[imgIndex] = true
        setLi(arr)
    // eslint-disable-next-line react-hooks/exhaustive-deps
    },[children])
    // useEffect(()=>{
    //     console.log(slideRef)
    //     if(slideRef.current){
    //         slideRef.current.ontouchstart = (e)=>{
    //             clearInterval(timer)
    //             // startX = e.targetTouches[0].clientX
    //             console.log(e)
    //         }
    //         slideRef.current.ontouchmove = (e)=>{
    //             // rangee = (e.changedTouches[0].clientX - startX)/e.changedTouches[0].target.clientWidth
    //             // setRange(rangee)
    //             console.log(e)
    //         }
    //         slideRef.current.ontouchend = (e)=>{
    //             console.log('touchEnd', e)
    //             // if(rangee > 0.07){
    //             //     prve()
    //             // }
    //             // if(rangee < -0.07){
    //             //     next()
    //             // }
    //             // clearInterval(timer)
    //             let time = setInterval(() => {
    //                 next()
    //             }, delay)
    //             setTimer(time)
    //             setRange(0)
    //         }
    //     }
        
    // // eslint-disable-next-line react-hooks/exhaustive-deps
    // },[slideRef])
    useEffect(()=>{
        let arr = new Array(Children.count(children)).fill(false)
        if(imgIndex === Children.count(children)){
            arr[0] = true
        }else if(imgIndex === -1){
            arr[Children.count(children) - 1] = true
        }else{
            arr[imgIndex] = true
        }
        setLi(arr)
        if(autoPlay && !isUnMount){
            clearInterval(timer)
            let time = setInterval(() => {
                next()
            }, delay)
            setTimer(time)
        }
    // eslint-disable-next-line react-hooks/exhaustive-deps
    },[imgIndex, children])
    useEffect(()=>{
        setRanges(imgIndex + 1 + range)
    // eslint-disable-next-line react-hooks/exhaustive-deps
    },[imgIndex, range])
    useEffect(() => {
        if(transition === null){
            if(opType === 'next'){
                console.log('set0')
                setIndex(0)
            }
            if(opType === 'prve'){
                setIndex(Children.count(children) - 1)
            }
        }
    // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [opType, transition])
    function prve(params) {
        let index = (imgIndex - 1 < 0)?Children.count(children) - 1 : imgIndex - 1
        clearTimeout(timers)
        if(imgIndex === 0){
            setTransition('left ease 0.3s')
            setIndex(-1)
            setOp('prve')
            timers = setTimeout(() => {
                setTransition(null)
                // setIndex(0)
            }, 300);
        }else{
            setTransition('left ease 0.3s')
            setIndex(index)
        }
    }
    function next(params) {
        
        clearTimeout(timers)
        if(imgIndex === (Children.count(children) - 1)){
            setTransition('left ease 0.3s')
            setIndex(Children.count(children))
            setOp('next')
            timers = setTimeout(() => {
                setTransition(null)
                // setIndex(0)
            }, 300);
        }else{
            let index = (imgIndex >= Children.count(children) - 1) ? 0 : imgIndex + 1
            setTransition('left ease 0.3s')
            setIndex(index)
        }
    }
    return <div className='Slide' ref={slideRef} style={{height:height}}>
        <div className='slideContainer' 
            style={{
                width:`${100 * (li.length + 2)}%`,
                left:`${-100 * (ranges)}%`,
                transition: transition
            }}
            onTouchStart={(e)=>{
                // clearTimeout(timers)
                clearInterval(timer)
                // console.log(e.targetTouches[0].clientX)
                startX = e.targetTouches[0].clientX
            }}
            onTouchMove={(e)=>{
                rangee = (e.changedTouches[0].clientX - startX)/e.changedTouches[0].target.clientWidth
            }}
            onTouchEnd={()=>{
                console.log('touchEnd', rangee)
                if(rangee > 0.07){
                    prve()
                }
                if(rangee < -0.07){
                    next()
                }
                clearInterval(timer)
                let time = setInterval(() => {
                    next()
                }, delay)
                setTimer(time)
                setRange(0)
                rangee = 0
            }}
        >
            <div className='slideItem' style={{width:`${100/(li.length + 2)}%`}}>
                {
                    Children.toArray(children)[Children.toArray(children).length-1]
                }
            </div>
            {Children.toArray(children).map((val)=>{
                // console.log(val)
                return <div className='slideItem' style={{width:`${100/(li.length+2)}%`}} key={Math.random()*100}>{val}</div>
            })}
            <div className='slideItem' style={{width:`${100/(li.length + 2)}%`}}>
                {
                    Children.toArray(children)[0]
                }
            </div>
        </div>

        <div className='control'>
            {li.map((val, idx)=>{
                return <span onClick={()=>{
                    setIndex(idx)
                }} 
                key={idx}
                style={{backgroundColor:`${val?activeColor:unActiveColor}`}}
                className={`${val?'active':'noActive'}`}
                ></span>
            })}
        </div>
        {showBtns && (<><div className='right' onClick={next}>
            <i className='iconfont icon-xiayixiang'></i>
        </div>
        <div className='left' onClick={prve}>
            <i className='iconfont icon-xiayixiang prve'></i>
        </div></>)}
    </div>
}

Slide.Item = function(props){
    return <div onClick={()=>{
        window.open(props.src)
    }}>
        {/* <div className='slideTitle'>{props.title}</div> */}
    {props.children}</div>
}
export default Slide